import React, { useState } from 'react';
import { BarChart3, Download, Calendar, Filter, TrendingUp, Users, CheckCircle, XCircle } from 'lucide-react';

export const Statistics: React.FC = () => {
  const [dateRange, setDateRange] = useState('today');
  const [district, setDistrict] = useState('all');
  const [guardPoint, setGuardPoint] = useState('all');

  // Mock data
  const stats = {
    totalVerifications: 156,
    approvedCount: 142,
    rejectedCount: 14,
    specialVisitorHits: 8,
    approvalRate: 91.0,
    districts: [
      { name: '东区', approved: 45, rejected: 5 },
      { name: '西区', approved: 38, rejected: 3 },
      { name: '南区', approved: 32, rejected: 4 },
      { name: '北区', approved: 27, rejected: 2 }
    ],
    hourlyData: [
      { hour: '08:00', count: 12 },
      { hour: '09:00', count: 18 },
      { hour: '10:00', count: 25 },
      { hour: '11:00', count: 22 },
      { hour: '12:00', count: 8 },
      { hour: '13:00', count: 15 },
      { hour: '14:00', count: 28 },
      { hour: '15:00', count: 18 },
      { hour: '16:00', count: 10 }
    ]
  };

  const exportReport = (format: 'pdf' | 'excel') => {
    console.log(`Exporting report as ${format}`);
    // Simulate export
    alert(`正在导出${format.toUpperCase()}格式报告...`);
  };

  return (
    <div className="max-w-7xl mx-auto space-y-6">
      {/* Header and controls */}
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">统计分析</h2>
            <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
              访客核验数据统计与分析报告
            </p>
          </div>
          
          <div className="flex flex-wrap gap-2">
            <button
              onClick={() => exportReport('excel')}
              className="flex items-center px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 transition-colors"
            >
              <Download className="h-4 w-4 mr-2" />
              导出Excel
            </button>
            <button
              onClick={() => exportReport('pdf')}
              className="flex items-center px-3 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors"
            >
              <Download className="h-4 w-4 mr-2" />
              导出PDF
            </button>
          </div>
        </div>

        {/* Filters */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              <Calendar className="h-4 w-4 inline mr-1" />
              时间范围
            </label>
            <select
              value={dateRange}
              onChange={(e) => setDateRange(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            >
              <option value="today">今日</option>
              <option value="week">本周</option>
              <option value="month">当月</option>
              <option value="custom">自定义</option>
            </select>
          </div>
          
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              <Filter className="h-4 w-4 inline mr-1" />
              院区
            </label>
            <select
              value={district}
              onChange={(e) => setDistrict(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            >
              <option value="all">全部院区</option>
              <option value="east">东区</option>
              <option value="west">西区</option>
              <option value="south">南区</option>
              <option value="north">北区</option>
            </select>
          </div>
          
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              门卫点
            </label>
            <select
              value={guardPoint}
              onChange={(e) => setGuardPoint(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            >
              <option value="all">全部门卫点</option>
              <option value="main">主入口</option>
              <option value="side">侧门</option>
              <option value="emergency">急诊入口</option>
            </select>
          </div>
        </div>
      </div>

      {/* Overview stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400">总核验次数</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-white">{stats.totalVerifications}</p>
            </div>
            <div className="h-12 w-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
              <Users className="h-6 w-6 text-blue-600 dark:text-blue-400" />
            </div>
          </div>
          <div className="mt-4 flex items-center">
            <TrendingUp className="h-4 w-4 text-green-500 mr-1" />
            <span className="text-sm text-green-600">+12% 比昨日</span>
          </div>
        </div>

        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400">放行次数</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-white">{stats.approvedCount}</p>
            </div>
            <div className="h-12 w-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center">
              <CheckCircle className="h-6 w-6 text-green-600 dark:text-green-400" />
            </div>
          </div>
          <div className="mt-4">
            <span className="text-sm text-gray-600 dark:text-gray-400">
              放行率：{stats.approvalRate}%
            </span>
          </div>
        </div>

        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400">拒绝次数</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-white">{stats.rejectedCount}</p>
            </div>
            <div className="h-12 w-12 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center">
              <XCircle className="h-6 w-6 text-red-600 dark:text-red-400" />
            </div>
          </div>
          <div className="mt-4">
            <span className="text-sm text-gray-600 dark:text-gray-400">
              拒绝率：{(100 - stats.approvalRate).toFixed(1)}%
            </span>
          </div>
        </div>

        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400">特殊访客</p>
              <p className="text-2xl font-bold text-gray-900 dark:text-white">{stats.specialVisitorHits}</p>
            </div>
            <div className="h-12 w-12 bg-yellow-100 dark:bg-yellow-900 rounded-full flex items-center justify-center">
              <Users className="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
            </div>
          </div>
          <div className="mt-4">
            <span className="text-sm text-gray-600 dark:text-gray-400">
              占比：{((stats.specialVisitorHits / stats.totalVerifications) * 100).toFixed(1)}%
            </span>
          </div>
        </div>
      </div>

      {/* Charts */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* District statistics */}
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">各院区统计</h3>
          <div className="space-y-4">
            {stats.districts.map((district, index) => (
              <div key={district.name}>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
                    {district.name}
                  </span>
                  <span className="text-sm text-gray-600 dark:text-gray-400">
                    {district.approved + district.rejected}次
                  </span>
                </div>
                <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                  <div
                    className="bg-blue-600 h-2 rounded-full"
                    style={{
                      width: `${((district.approved + district.rejected) / stats.totalVerifications) * 100}%`
                    }}
                  ></div>
                </div>
                <div className="flex justify-between text-xs text-gray-500 dark:text-gray-500 mt-1">
                  <span>放行: {district.approved}</span>
                  <span>拒绝: {district.rejected}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Hourly distribution */}
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">时段分布</h3>
          <div className="space-y-3">
            {stats.hourlyData.map((item) => (
              <div key={item.hour} className="flex items-center">
                <div className="w-16 text-sm text-gray-600 dark:text-gray-400">
                  {item.hour}
                </div>
                <div className="flex-1 mx-3">
                  <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
                    <div
                      className="bg-green-500 h-3 rounded-full transition-all"
                      style={{
                        width: `${(item.count / Math.max(...stats.hourlyData.map(d => d.count))) * 100}%`
                      }}
                    ></div>
                  </div>
                </div>
                <div className="w-8 text-sm text-gray-900 dark:text-white text-right">
                  {item.count}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};